<template>
  <div class="login">
    <div class="form">
      <div class="title">
        <span class="log">{{ $t('title') }}</span>
      </div>
      <el-input class="form_input" prefix-icon="User" clearable v-model="userForm.username"
        :placeholder="$t('username')" />
      <el-input class="form_input" prefix-icon="Lock" type="password" show-password v-model="userForm.password"
        :placeholder="$t('password')" />
      <div class="verifty_div">
        <el-input class="form_input verifty" prefix-icon="EditPen" @keyup.enter.native="login"
          v-model="inputIdentifyCode" :placeholder="$t('verifyCode')"></el-input>
        <Verifty :identifyCode="identifyCode" @click="refreshCode"></Verifty>
      </div>
      <el-button type="primary" class="login_button" @click="login">{{ $t('login') }}</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import request from "@/utils/request";
import Verifty from "@/components/Verify.vue";
import { md5 } from 'js-md5';
import { useI18n } from "vue-i18n"
import router from '@/router';
import { useStore } from 'vuex';

const store = useStore();

const userForm = ref({
  username: 'wyh',
  password: '123456',
});
//页面显示的验证码
const identifyCode = ref('');
//用户输入的验证码
const inputIdentifyCode = ref('');
//验证码取值范围
const dataRange = '0123456789';
const { t } = useI18n();

const makeCode = (code, length) => {
  for (let i = 0; i < length; i++) {
    identifyCode.value += code[randomNum(0, code.length)]
  }
};

const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};

const refreshCode = () => {
  identifyCode.value = '';
  inputIdentifyCode.value = '';
  makeCode(dataRange, 4);
};

const login = () => {
  if (!userForm.value.username) {
    ElMessage.error(t('usernameCannotEmpty'));
    refreshCode();
    return;
  }
  if (!userForm.value.password) {
    ElMessage.error(t('passwordCannotEmpty'));
    refreshCode();
    return;
  }
  if (!inputIdentifyCode.value) {
    ElMessage.error(t('verifyCannotEmpty'));
    refreshCode();
    return;
  }
  if (inputIdentifyCode.value !== identifyCode.value) {
    ElMessage.error(t('verifyCodeError'));
    refreshCode();
    return;
  }

  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.5)',
  })

  //用于发送请求的数据
  const axiosForm = { ...userForm.value, password: md5(userForm.value.password) };
  request.post("/user/v1/login", axiosForm).then(res => {
    if (res.data.code == 1) {
      //延时关闭加载动画
      setTimeout(() => {
        //登录成功，保存状态
        store.commit('SAVE_LOGIN_STATUS', "yes")
        ElMessage.success(res.data.msg);
        router.push('/home');
        loading.close()
      }, 1000)
    } else {
      loading.close();
      ElMessage.error(res.data.msg);
      refreshCode();
    }
  }).catch(err => {
    loading.close();
    console.log("Error>>", err);
    ElMessage.error(t('networkError'));
  });
};

onMounted(() => {
  makeCode(dataRange, 4);
});
</script>

<style>
.el-input__wrapper {
  background-color: #e0e0e0 !important;
  padding: 8px 20px !important;
}

.el-input__prefix {
  color: #000 !important;
}

.el-input__inner {
  font-size: 1.5rem !important;
  padding-left: 5px !important;
}

.el-icon svg {
  height: 1.3em !important;
  width: 1.3em !important;
  position: fixed;
}
</style>

<style scoped lang="scss">
.verifty_div {
  display: flex;
  justify-content: space-between;
}

.verifty {
  width: 50%;
}

.login_button {
  width: 100%;
}

.form_input {
  margin-bottom: 1.5rem;
}

.title {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}


.log {
  font-size: 2.4rem;
}

.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('@/assets/img/verify.jpg') 0% 0% / 100% 100% no-repeat;
}

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255);
  padding: 3rem;
  border-radius: 5px;
  width: 500px;
}

input {
  display: block;
  margin-bottom: 1rem;
  padding: 5px;
  width: 200px;
}

button {
  margin-top: 1rem;
  height: 5rem;
  font-size: 2rem;
  border: none;
}
</style>